<template>
  <div>
    <h3>其他组件 -- {{ proLen }}</h3>
    {{ count }}
    <button @click="add">加10</button>
    <button @click="reduce">减10</button>
  </div>
</template>

<script>
// mapState 辅助函数可以用来获取状态管理器的数据
// mapMutations 就是 this.$store.commit 的辅助函数，需要methods配合使用， 可用可不用
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  computed: { // mapState 辅助函数可以通过计算属性获取组件需要的状态
    ...mapState(['count']),
    ...mapGetters(['proLen'])
  },
  methods: {
    ...mapMutations({
      // 前者代表的是当前组件生成的同名的函数的名称
      // 后者代表的就是mutations中的函数的名称
      changeCount: 'updateCount' // 生成了一个同名的  updateCount
    }),
    add () {
      // this.$store.commit('updateCount', this.count + 10)
      this.changeCount(this.count + 10)
    },
    reduce () {
      // this.$store.commit('updateCount', this.count - 10)
      this.changeCount(this.count - 10)
    }
  }
}
</script>
